<template>
  <div>
    <div id='btns'>
        <el-row type="flex" justify="center">
            <el-button @click='OnStars'>girl and stars</el-button>
            <el-button type='primary' @click='OnRun'>man running</el-button>
            <el-button type='success' @click='OnCar'>car play</el-button>
            <el-button type='success' @click='OnFly'>Fly play</el-button>
        </el-row>
    </div>
    <div id='container'></div>
  </div>
</template>
<style>
#btns{
  margin-top: 100px
}
</style>

<script lang='ts'>
import Light, { MoveType } from '../three/HemisphereLight';
import starts from '../three/Stars';
import carplay from '../three/car';
import flyplay from '../three/FlySkyPlay';
import * as THREE from 'three';
import commom from '../utils/commom';

const commomutils = new commom();

export default {
  name: 'Three',
  methods: {
    OnStars: () => {
      commomutils.RemoveElement('btns');
      const container = document.getElementById('container');

      const starshow = new starts(container);
    },
    OnRun: () => {
      commomutils.RemoveElement('btns');
      const container = document.getElementById('container');
      const hemisphereLight = new Light(container);
      // hemisphereLight.LoadModelDEA('../models/Treadmill Running.dae', 100, 0.5, MoveType.X,1000,
      // 'default','Beta_Surface'); //mesh Beta_Surface Beta_Joints
      hemisphereLight.LoadModelGltf(
        '../models/Soldier.glb',
        100,
        -0.5,
        MoveType.X,
        100,
        'Run',
        'vanguard_Mesh',
      );
      // hemisphereLight.LoadModelFBXMulti('../models/Treadmill Running.fbx', 100, 0.5,MoveType.X,20);
      // for (let i = 0; i < 5; i++) {
      //     hemisphereLight.LoadModel('../models/Treadmill Running.fbx', i * 100, 0, MoveType.Z);
      // }
    },
    OnCar: () => {
      commomutils.RemoveElement('btns');
      const container = document.getElementById('container');
      const car = new carplay(container);
      car.LoadModelGltf('./models/smallcar.gltf');
    },
    OnFly: () => {
      commomutils.RemoveElement('btns');
      const container = document.getElementById('container');
      const flycontrol = new flyplay(container);
      // flycontrol.LoadObjModel('./models/Halcon Milenario/Halcon Milenario.obj');
      flycontrol.LoadModelGltf('./models/smallcar.gltf');
    },
  },
  mounted: () => {
    console.log('three vue ini');
  },
};
</script>

<style scoped>
</style>
